<template>
  <!-- 上架作品 -->
  <div class="customer_box">
    <div class="dialog_box">
      <span class="title">上架作品</span>
      <div class="fomedata">
        <el-form
          :model="artworksForm"
          :inline="true"
          class="visible"
          label-width="80px"
          ref="artworksForm"
        >
          <el-form-item
            label="作品名称"
            prop="title"
            :rules="[{ required: true, message: '作品名称不能为空' }]"
          >
            <el-input
              v-model="artworksForm.title"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="描述"
            prop="description"
            :rules="[{ required: true, message: '描述不能为空' }]"
          >
            <el-input
              type="textarea"
              v-model="artworksForm.description"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="类别"
            prop="material"
            :rules="[{ required: true, message: '类别不能为空' }]"
          >
            <el-select
              v-model="artworksForm.material"
              placeholder="请选择作品类别"
              style="width: 300px"
            >
              <el-option label="油画" value="0"></el-option>
              <el-option label="水彩画" value="1"></el-option>
              <el-option label="素描" value="2"></el-option>
              <el-option label="版画" value="3"></el-option>
              <el-option label="雕塑" value="4"></el-option>
              <el-option label="其他" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="价格"
            prop="price"
            :rules="[
              { required: true, message: '价格不能为空' },
            ]"
          >
            <el-input
              v-model="artworksForm.price"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <!-- 图片上传组件 -->
          <div class="pic">
            <!-- 图片上传组件 -->
            <el-form-item
              label="图片"
            >
              <el-upload
                action="#"
                list-type="picture-card"
                :limit="1"
                :on-exceed="handleExceed"
                :on-change="beforeUpload1"
                :auto-upload="false"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                </div>
              </el-upload>
            </el-form-item>
          </div>
        </el-form>
        <div class="dialog-footer">
          <el-button type="success" @click="validation">上架作品</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { postartwork } from "@/api/artworks";
import { mapState } from "vuex";
export default {
  data() {
    return {
      artworksForm: {
        artist: "",
        title: "",
        description: "",
        material: "",
        price: "",
      },
      // 用户选择的图片
      file: null,
    };
  },
   computed: {
    ...mapState(["user"]),
  },
  methods: {
    // 文件超出提示
    handleExceed() {
      this.$message.warning(`当前限制选择 1 个文件`);
    },

    // 图片上传存储
    beforeUpload1(file) {
      this.file = file.raw;
      return false;
    },
    // 确认上传按钮
    validation() {
      this.$refs["artworksForm"].validate((valid) => {
        if (valid) {
          let formData = new FormData();
          this.artworksForm.artist = this.user.id
            // 添加表单信息到formData
            Object.keys(this.artworksForm).forEach((key) => {
              formData.append(key, this.artworksForm[key]);
            });
            formData.append("image", this.file);

            postartwork(formData)
              .then((res) => {
                this.$message.success("添加成功");
                this.resetForm();
                // 跳转到艺术品
                this.$router.push("/artworkInformation");
              })
              .catch((err) => {
                this.$message.error("数据格式错误");
              });
        } else {
          this.$message.error("数据格式错误");
          return false;
        }
      });
    },
    // 重置表单数据和文件数据
    resetForm() {
      this.artworksForm = {
        title: "",
        description: "",
        material: "",
        price: "",
        file: "",
      };
    },
  },

};
</script>

<style lang="less" scoped>
.customer_box {
  position: relative;
  width: 100%;
  height: 86vh;
  background-size: cover; /* 可选：根据需要设置背景大小 */
  background-position: center; /* 可选：根据需要设置背景位置 */
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    black,
    black,
    black,
    rgba(0, 0, 0, 0)
  );

  .dialog_box {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 70vh;
    background: linear-gradient(to bottom, #b6dcfc, #fff, #fff, #fff, #b6dcfc);
    box-shadow: 0 0 10px #b8c9dd;
    border-radius: 16px;
    padding: 20px;
    box-sizing: border-box;
    transition: all 0.5s;

    .title {
      font-size: 25px;
      width: 100%;
    }
    .fomedata {
      margin-top: 30px;
      .el-form-item {
        display: flex;
        margin-left: 30%;
      }
    }
  }
}

// @media (max-width: 1400px) {
//   .dialog_box {
//     width: 80% !important;
//   }
// }
</style>
